<template>
    <div class="search">

        <div v-if="isShow">
            <div class="goods-top">
                <div class="top-back" @click="backhome"><img src="@/assets/back.png" alt=""> 返回</div>
                <p>分类</p>  
            </div>
        </div>
        <div class="top">
            <van-search class="sel" v-model.trim="val" placeholder="商品搜索" @input="select" shape="round"/>
            <p class="del" @click="backhome">取消</p>
        </div>
        <div v-if="current == 'init'" class="init">
            <div class="hisbox">
                <div class="hisbox-top">
                    <h4>历史记录</h4>
                    <img src="@/assets/rec.png" alt="" @click="delhis">
                </div>
                <div class="history-list">
                    <div class="history-item" v-for="item in InfoList.historyData" :key="item.id" @click="goGoods(item.keyword)">
                        {{ item.keyword }}
                    </div>
                </div>
            </div>
            <div class="hotbox">
                <h4>热门搜索</h4>
                <div class="hot-list">
                    <div class="hot-item" v-for="item in InfoList.hotKeywordList" :key="item.id" @click="goGoods(item.keyword)">
                        {{ item.keyword }}
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="current == 'notice'" class="notice">
            <div class="keywords">
                <div class="keywords-list" v-for="item in SelList.keywords" :key="item.id" @click="goGoods(item.name)">
                    <span>{{ item.name }}</span>
                    <img src="@/assets/go.png" alt="">
                </div>
            </div>
        </div>
        <div v-else class="goods">
            <div class="goods-center">
                <p>综合</p>
                <p>价格</p>
                <p>分类</p>
            </div>
            <div class="goods-list">
                <div class="goods-item" v-for="item in goods.keywords" :key="item.id">          
                    <img :src="item.list_pic_url" alt="">
                    <p class="item-name">{{ item.name }}</p>
                    <p class="item-price">¥ {{ item.retail_price }}</p>
                </div>
            </div>
        </div>
        
    </div>
    
</template>

<script>
import {indexaction , helperaction , addhistoryaction , clearhistoryAction} from  "@/api/home/search/index"
export default {
    name: 'Index',

    data() {
        return {
            current:"init",
            InfoList:[],
            SelList:[],
            val:"",
            goods:[],
            isShow:false
        };
    },

    mounted() {
        
    },

    methods: {
        delhis(){
            clearhistoryAction({
                openId:localStorage.getItem("openId")
            }).then((res)=>{
                location.reload();
            })
            
        },
        goGoods(val){
            this.current = "goods"
            this.isShow = true
            helperaction({
                keyword:val,
                order:""
            }).then((res)=>{
                this.goods = res
                console.log(res);
            })

            addhistoryaction({
                keyword:val,
                openId:localStorage.getItem("openId")
            })
        },
        select(){
            this.current = "notice"
            this.isShow = false
            helperaction({
                keyword:this.val,
                order:""
            }).then((res)=>{
                console.log(res);
                this.SelList = res
            })
           if(this.val == ''){
            this.current = "init"
            this.isShow = false
           }
        },
        backhome(){
            this.$router.push({name:"home"})
        }
    },

    created(){
        indexaction({
            openId:localStorage.getItem("openId")
        })
        .then(res=>{
            console.log(res);
            this.InfoList = res
        })
    }
};
</script>

<style scoped lang="scss">
@import "../scss/search/index.scss";
*{
    margin: 0;
    padding: 0;
}
</style>